/*
用户注册的路由组件
*/
import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Redirect} from 'react-router-dom';
import {register} from '../../redux/actions';
import Logo from '../../components/logo/logo';
import {
    NavBar,
    WingBlank,
    List,
    InputItem,
    WhiteSpace,
    Radio,
    Button
} from 'antd-mobile';

const ListItem = List.Item;

class Register extends Component {
    state = {
        username: '', //用户名
        password: '', //密码
        password2: '',//确认密码
        type: 'laoban'      //用户类型 大神 老板
    }
    register = () => {
        this.props.register(this.state);
    }
    toLogin = () => {
        this.props.history.replace('/login');
    }
    handlerChange = (name, val) => {
        this.setState({
            [name]: val
        });
    }

    render() {
        let {type} = this.state;
        const {msg, redirectTo} = this.props.user;
        //如果redirectTo有值，就需要重定向到指定的路径去
        if (redirectTo) {
            return <Redirect to={redirectTo}/>
        }
        return (
            <div>
                <NavBar>硅&nbsp;谷&nbsp;直&nbsp;聘</NavBar>
                <Logo/>
                <WingBlank>
                    <List>
                        {msg ? <div className='error-msg'>{msg}</div> : null}
                        <InputItem placeholder='请输入用户名' onChange={val => {
                            this.handlerChange('username', val)
                        }}>用户名：</InputItem>
                        <WhiteSpace/>
                        <InputItem placeholder='请输入密码' type="password" onChange={val => {
                            this.handlerChange('password', val)
                        }}>密码：</InputItem>
                        <WhiteSpace/>
                        <InputItem placeholder='请确认密码' type="password" onChange={val => {
                            this.handlerChange('password2', val)
                        }}>确认密码：</InputItem>
                        <WhiteSpace/>
                        <ListItem>
                            <span>用户类型：</span>&nbsp;&nbsp;&nbsp;
                            <Radio checked={type == 'dashen'} onChange={() => {
                                this.handlerChange('type', 'dashen')
                            }}>大神</Radio>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <Radio checked={type == 'laoban'} onChange={() => {
                                this.handlerChange('type', 'laoban')
                            }}>老板</Radio>
                        </ListItem>
                        <WhiteSpace/>
                        <Button type="primary" onClick={this.register}>注册</Button>
                        <WhiteSpace/>
                        <Button onClick={this.toLogin}>已有账户</Button>
                    </List>
                </WingBlank>
            </div>
        )
    }
}

export default connect(
    state => ({user: state.user}),
    {register}
)(Register)